//监听鼠标按下事件
//v1版本，“暴力式”地清空所有高亮和暂停所有音频，效率低且体验不好。而且如果有多个按键同时被快速触发，高亮状态和声音会互相干扰，体验较差。 大量使用循环不好
/* window.addEventListener('keydown', (event) => {
    // 根据keyCode找到对应div，高亮
    const currKey = document.querySelector(`.keys div[data-key="${event.keyCode}"]`);
    // 根据keyCode获取audio
    const curraudio = document.querySelector(`audio[data-key="${event.keyCode}"]`);
    //获取所有key，然后去除所有高亮
    const kyes = document.getElementsByClassName('key');
    for (const key of kyes) {
        // key.className = 'key';
        // 移除playing
        key.classList.remove('playing');
    }
    // 获取所有audio，然后暂停播放
    const audios = document.getElementsByTagName('audio');
    for (const audio of audios) {
        audio.pause();
    }


    //添加高亮样式
    // currKey.className='key playing';
    currKey.classList.add('playing');
    // 播放音频
    curraudio.play();
}, false); */

//************************************************************************************************************** */
//v2 版本
//播放音频添加高亮
function playSound(event) {
    const currKey = document.querySelector(`.keys div[data-key="${event.keyCode}"]`);
    const curraudio = document.querySelector(`audio[data-key="${event.keyCode}"]`);
    //如果音频不存在，则return
    if(!curraudio) return;
    //添加高亮
    currKey.classList.add('playing');
    //播放音频 重置进度，每次都是重新播放
    curraudio.currentTime = 0;
    curraudio.play();
}

//去除高亮
function removePlaingStatus(event){
    //判断是否是 transform动画结束，不要影响其他css动画(万一有)
    if(event.propertyName!='transform') return;
    //去除高亮class
    event.target.classList.remove('playing');
}


//添加keydown监听 播放音频
window.addEventListener('keydown',playSound);
//对每一个 .key 元素，都添加了一个transitionend事件监听器。当该元素上发生 CSS 过渡动画（transition）并结束时，会触发这个事件。
//在每一次 transitionend 事件的回调函数中，event.propertyName 就表示是哪一个 CSS 属性的动画结束了。
//自动去除高亮
const keys = document.querySelectorAll('.key');
keys.forEach(key=>key.addEventListener('transitionend',removePlaingStatus));

